<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:include="include :: header('新增随手拍')"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link th:href="@{/res/detailError/lib/weui.min.css}" rel="stylesheet"/>
    <link th:href="@{/res/detailError/css/jquery-weui.css}" rel="stylesheet"/>
    <link th:href="@{/res/detailError/css/common.css}" rel="stylesheet"/>
</head>
<body class="bgline3">

<div class="weui-cells weui-cells_form bgline3 mt0">

    <div class="weui-cells__title">提交人</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input ft14" type="text" placeholder="请输入提交人">
            </div>
        </div>
    </div>

    <div class="weui-cells__title">标题</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input ft14" type="text" placeholder="请输入标题">
            </div>
        </div>
    </div>

    <div class="weui-cells__title">内容</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea ft14" placeholder="请输入内容" rows="3"></textarea>
            </div>
        </div>
    </div>

    <div class="weui-cells__title">图片上传</div>
    <div class="weui-cell bgpart">
        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">
                        <li class="weui-uploader__file posRelt" style="background-image:url(./img/asdapp.png)">
                            <i class="weui-icon-cancel abstort" style="right: -10px; top: 0;"
                               onclick="delImg(this, './img/asdapp.png')"></i>
                        </li>
                        <li class="weui-uploader__file posRelt" style="background-image:url(./img/hzza.png)">
                            <i class="weui-icon-cancel abstort" style="right: -10px; top: 0;"
                               onclick="delImg(this, './img/hzza.png')"></i>
                        </li>
                        <li class="weui-uploader__file posRelt" style="background-image:url(./img/newjtwfcl.png)">
                            <i class="weui-icon-cancel abstort" style="right: -10px; top: 0;"
                               onclick="delImg(this, './img/newjtwfcl.png')"></i>
                        </li>
                    </ul>
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*"
                               capture="camera" onchange="pzImgChang()">
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="plr20 mtb20">
    <a href="javascript:;" class="weui-btn weui-btn_primary">保存</a>
</div>

<script th:src="@{/res/detailError/js/jquery-1.12.4.min.js}"></script>
<script>

    function pzImgChang() {
        var img = document.getElementById('uploaderInput'); //img 获取到的是图片地址，通过下面的方法获取到时的图片的base64编码
        var imgFile = new FileReader();
        imgFile.readAsDataURL(img.files[0]);
        imgFile.onload = function () {
            var imgData = this.result; //得到base64数据
            console.log(imgData)
        }
    }

    function delImg(obj, url) {
        $(obj).parent().remove()
    }

</script>

</body>
</html>
